<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gramos - Admin Dashboard</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="/shop/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="/shop/assets/css/app.css" type="text/css">
    <!-- end::custom styles -->
    <script src="/shop/assets/js/jquery-3.6.js"></script>
    <style>
        .bar1 {
            transform:rotate(0deg) translate(0, -40px);opacity:0.12;
        }
        .bar2 {
            transform:rotate(45deg) translate(0, -40px);opacity:0.25;
        }
        .bar3 {
            transform:rotate(90deg) translate(0, -40px);opacity:0.37;
        }
        .bar4 {
            transform:rotate(135deg) translate(0, -40px);opacity:0.50;
        }
        .bar5 {
            transform:rotate(180deg) translate(0, -40px);opacity:0.62;
        }
        .bar6 {
            transform:rotate(225deg) translate(0, -40px);opacity:0.75;
        }
        .bar7 {
            transform:rotate(270deg) translate(0, -40px);opacity:0.87;
        }
        .bar8 {
            transform:rotate(315deg) translate(0, -40px);opacity:1;
        }

        #div1 {
            z-index: 1000;
            position:absolute;
            width:100px;
            height:100px;
            top: 35%;
            left: 45%;
            transform:scale(0.5);
            transform:scale(0.5);

            /* not used right now: */
            animation-name: rotateThis;
            animation-duration:2s;
            animation-iteration-count:infinite;
            animation-timing-function:linear;
        }
        #div1 div{
            z-index: 1000;
            width:10px;
            height:30px;
            background:greenyellow;
            position:absolute;
            top:35px;
            left:45px;
        }
        /* shadows for the first spinner */
        #div1 div {
            box-shadow:black 0 0 4px
        }
    </style>
    <script>
        var count = 0;
        function rotate() {
            var elem = document.getElementById('div1');
            elem.style.transform = 'scale(0.5) rotate('+count+'deg)';
            if (count==360) { count = 0 }
            count+=45;
            window.setTimeout(rotate, 100);
        }
        window.setTimeout(rotate, 100);
    </script>

</head>

<body class="bg-white h-100-vh p-t-0">
<div id="div1" style="display: none">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
    <div class="bar7"></div>
    <div class="bar8"></div>
</div>
<div id="scan-div" style="display: none;height: 100%;width: 100%;float: left;position: absolute;left: 250px;top:50px;z-index: 98">
    <video id="video" style="height: 450px;width: 800px; display: inline-block;border: 3px double black"></video>
    <%--    float: left;position: absolute;left: 1100px;top:250px;--%>
    <button id="take-photo" style="margin-top: -290px;display: inline-block;width: 50px;height: 50px; z-index: 99">action</button>
    <canvas id="canvas" style="  display: none;width: 800px;height: 800px" ></canvas>
</div>
<div id="register-div">
    <!-- begin::page loader-->
    <div class="page-loader">
        <div class="spinner-border"></div>
        <span>Loading ...</span>
    </div>
    <!-- end::page loader -->

    <div class="p-b-50 d-block d-lg-none"></div>

    <div class="container h-100-vh">
        <div class="row align-items-md-center h-100-vh">
            <div class="col-lg-6 d-none d-lg-block">
                <img class="img-fluid" src="/shop/assets/media/svg/register.svg" alt="...">
            </div>
            <div class="col-lg-4 offset-lg-1">
                <h3>Register</h3>
                <p>Create a new account</p>
                <form action="/shop/admin/register" method="post">
                    <div class="form-group mb-4">
                        <input type="text" name="aname" value="${aUser.aname}" class="form-control form-control-lg" autofocus placeholder="Username">
                    </div>
                    <div class="form-group mb-4">
                        <input type="password" name="apwd" value="${aUser.apwd}" class="form-control form-control-lg" placeholder="Email">
                    </div>
                    <div class="form-group mb-4">
                        <p><input type="hidden" name="photo"></p>
                        <div id="change-button-img" style="width: 350px;height: 100px;">
                            <img id="take-photo-img" src=""  align="center" class="form-control form-control-lg" style="width: 250px;height: 100px;">
                            <input id="begin-scan" type="button" style="margin-left:110px;margin-top:-65px;display: none;width: 25px;height: 25px; background-image: url('/shop/assets/img/1.jpg');background-size:23px 27px;background-repeat: no-repeat;background-position: center ">
                        </div>
                    </div>
                    <hr>
                    <h3>${message}</h3>

                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="customSwitch" checked="">
                            <label class="custom-control-label" for="customSwitch">I agree to the Terms and Privacy.</label>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg btn-block btn-uppercase mb-4">Create Account</button>
                    <p class="text-right">
                        <a href="#" class="text-underline">Already a user?</a>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

<!-- begin::global scripts -->
<script src="/shop/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::custom scripts -->
<script src="/shop/assets/js/app.js"></script>
<!-- end::custom scripts -->

<script>
    var div1=document.getElementById("div1");
    var beginScan=document.getElementById("begin-scan");
    var scanDiv=document.getElementById("scan-div");
    var takePhoto=document.getElementById("take-photo");
    var registerDiv=document.getElementById("register-div");
    var photo=document.getElementsByName("photo")[0];
    var changeButtonImg=document.getElementById("change-button-img");
    var takePhotoImg=document.getElementById("take-photo-img");
    var videoV=document.getElementById("video");
    var canvas=document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var mediaStreamTrack=null;

    changeButtonImg.onmouseenter=function (){
        beginScan.style.display="inline-block";
    }
    changeButtonImg.onmouseleave=function (){
        beginScan.style.display="none";
    }
    beginScan.onclick=function (){
        openUserMedia();
    }
    takePhoto.onclick=function (){
        videoV.pause();
        div1.style.display="inline-block";
        let imgBase64=getFace();
        $.ajax({
            url:"http://localhost:8080/shop/admin/detectImgIsSuit",
            type:"post",
            data:{"face-img":imgBase64},
            async:true,
            //dataType:"json",
            //contentType:"application/json;charset=utf-8",
            success:function (responseText){
                div1.style.display="none";
                if(responseText=="-1"){
                    alert("请保持一个人脸");
                    videoV.play();
                }
                else if(responseText=="-2"){
                    alert("您已经注册过了，请去登录");
                    off();
                    window.location.href="http://localhost:8080/shop/admin/goToLoginPage";
                }else if(responseText=="0"){
                    alert("请连接网络！！！");
                    videoV.play();
                }else{
                    off();
                }
            },
            error:function (){
                alert("出错了！！！");
                off();
            }
        });
    }

    function success(stream){
        //兼容webkit核心浏览器
        // var CompatibleURL = window.URL || window.webkitURL;
        //将视频流转化为video的源
        mediaStreamTrack=stream;
        try {
            // video.src = CompatibleURL.createObjectURL(stream);
            videoV.srcObject=stream;
        }catch (e) {
            console.log("访问用户媒体设备失败：",error.name,error.message);
        }

        videoV.play();//播放视频
        scanDiv.style.display="inline-block";
        registerDiv.style.opacity="0.3";
        //将视频绘制到canvas上
        //alert("请将人脸放在区域中间");
    }
    //当调用媒体错误时，会调用该函数
    function error(error) {
        console.log('访问用户媒体失败：',error.name,error.message);
    }
    function getUserMediaToPhoto(constraints,success,error) {
        if(navigator.mediaDevices.getUserMedia){
            //最新标准API。
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        }else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success,error);
        }else if(navigator.mozGetUserMedia){
            //firefox浏览器
            navigator.mozGetUserMedia(constraints,success,error);
        }else if(navigator.getUserMedia){
            //旧版API
            navigator.getUserMedia(constraints,success,error);
        }
    }
    //将视频绘制到canvas上
    function getFace() {
        context.drawImage(videoV,0,0,300,150);
        //将画布设置为图片类型
        context.img=canvas.toDataURL('image/jpg')
        //获取完整的base64编码
        context.img=context.img.split(',')[1];
        photo.value=context.img;
        takePhotoImg.src="data:image/jpg;base64,"+context.img;
        return context.img;
    }
    //打开摄像头
    function openUserMedia() {
        if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
            const constraintsCanvas = {
                audio: false,
                video: {
                    width: {min: 1024, ideal: 1280, max: 1920},
                    height: {min: 576, ideal: 720, max: 1080}
                }
            };
            getUserMediaToPhoto(constraintsCanvas,success,error);

        }else{
            alert('你的浏览器不支持访问用户媒体设备');
        }
    }
    function off(){
        offUserMedia();
        scanDiv.style.display="none";
        registerDiv.style.opacity="1";
    }
    //关闭摄像头
    function  offUserMedia() {
        if (mediaStreamTrack != null)
            mediaStreamTrack.getTracks()[0].stop();
    }
</script>
</body>

</html>